﻿<div class="panel panel-default">
	<div class="panel-heading">{tStorage usage}</div>
	<div class="panel-body">
		<div id="usagegraph"><img src="images/indicator.gif" />{tLoading}...</div>
		<br/>&nbsp;<br/>
	</div>
</div>

{?maximized}
<div class="row">
	<div class="col-lg-6">
{/maximized}
		<div class="panel panel-default">
			<div class="panel-heading">{tBackup Statistics}</div>
			<div class="panel-body">
				{^maximized}
				<div class="row">
					<div class="col-lg-8">
				{/maximized}
						<table id="statistics_table" class="table table-striped">
							<thead>
								<tr>			
									<th>{tComputer name}</th>
									<th>{tImages}</th>
									<th>{tFiles}</th>
									<th>{tAll}</th>
								</tr>
							</thead>
							<tbody>
								{rows|s}
							</tbody>
						</table>
						
						<div class="panel panel-primary">
							<div class="panel-heading">{tSum}</div>
							<div class="panel-body">
								<table class="table table-striped">
									<tr><td>{tImages}</td><td>{images_total}</td></tr>
									<tr><td>{tFiles}</td><td>{files_total}</td></tr>
									<tr><td>{tAll}</td><td>{used_total}</td></tr>
								</table>
								<button class="btn btn-default" onclick="recalculateStatistics()">{tRecalculate statistics}</button>
							</div>
						</div>
				{^maximized}
					</div>
				</div>
				{/maximized}
			</div>
		</div>
{?maximized}
	</div>
	<div class="col-lg-6">
{/maximized}

		<div class="panel panel-default">
			<div class="panel-heading">{tStorage allocation}</div>
			<div class="panel-body">
				<div id="piegraph"><img src="images/indicator.gif" />{tLoading}...</div>
			</div>
		</div>
{?maximized}
	</div>
</div> <!-- row -->
{/maximized}
